$(function () {
  //1.获取文章分类信息渲染到页面，封装成函数。后面增删改要用
  let layer = layui.layer
  let form = layui.form
  initArtCateList()
  function initArtCateList() {
    axios({
      method: 'get',
      url: '/my/article/cates',
    }).then(res => {
      if (res.data.status !== 0) {
        return layer.msg('res.data.message')
      }
      //渲染
      let arr = ['<option value="">请选择文章所属分类</option>']
      res.data.data.forEach(ele => {
        arr.push(`
                  <option value="${ele.Id}">${ele.name}</option>
        `)
      })
      //循环结束赋值
      let str = arr.join('')
      $('[name="cate_id"]').empty().html(str)
      form.render()
    })
  }

  //2. 初始化富文本编辑器
  initEditor()

  //3.1. 初始化图片裁剪器
  let $image = $('#image')

  // 3.2. 裁剪选项
  let options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview',
  }

  // 3.3. 初始化裁剪区域
  $image.cropper(options)

  //4.提交表单
  //4.1状态添加
  let state = ''
  $('#btn1').on('click', function () {
    state = '已发布'
  })
  $('#btn2').on('click', function () {
    state = '草稿'
  })
  //4.2选择图片，渲染图片
  $('#chooseImageBtn').on('click', function () {
    $('#chooseImageInp').click()
  })
  $('#chooseImageInp').on('change', function (e) {
    // 拿到用户选择的文件
    var file = e.target.files[0]
    //非空校验
    if (file === undefined) {
      return
    }
    // 根据选择的文件，创建一个对应的 URL 地址：
    var newImgURL = URL.createObjectURL(file)
    //先`销毁`旧的裁剪区域，再`重新设置图片路径`，之后再`创建新的裁剪区域`：
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', newImgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  })
  //4.3 FD  表单数据函数
  $('#formPub').on('submit', function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    //添加状态
    fd.append('state', state)
    //添加文章封面字段——生成图片是异步操作
    //所以结果要在回调函数里面操作
    //ajax都要写到，回调函数里面！！！
    //将裁剪后的图片，输出为文件
    $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280,
      })
      .toBlob(function (blob) {
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        fd.append('cover_img', blob)
        //发送ajax，一定要写在toBlob里面
        axios({
          method: 'post',
          url: '/my/article/add',
          data: fd,
        }).then(res => {
          if (res.data.status !== 0) {
            return layer.msg(res, message)
          }

          //成功提示
          layer.msg('恭喜您，添加文章成功!')

          //跳转到文章列表页
          setTimeout(function () {
            window.parent.document.querySelector('#art_list').click()
          }, 1000)
        })
      })
  })
})
